<template>
  <div class="tableExhibition">
    <el-table
      :data="tableData"
      :cell-class-name="shade"
      @cell-mouse-enter="cellMouseLeave"
      @cell-mouse-leave="mouseleave"
    >
      <el-table-column
        v-for="item of tabtitle"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope">
          <!-- 通过当前行下标,当前列id -->
          <div
            class="operation"
            v-if="scope.$index == rowIndex && scope.column.id == column.id"
          >
            <el-button type="text" @click="openaddRecord">新增</el-button>
            <el-button type="text" @click="openreviseRecord">编辑</el-button>
          </div>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="收货地址" :visible="dialogFormVisible">
      <!-- <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabtitle: [
        { prop: "date", label: "日期" },
        { prop: "name", label: "姓名" },
        { prop: "province", label: "省份" },
        { prop: "city", label: "市区" },
        { prop: "address", label: "地址" },
        { prop: "zip", label: "邮编" },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王大虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      row: {}, //选中单元格的行
      column: {}, //选中单元格的列
      rowIndex: "", //当前行的下标
      dialogFormVisible: false
    };
  },
  methods: {
    // 选中单元格的样式
    shade(row, column, cell, event) {
      if (this.row == row.row && this.column == row.column) {
        // 当前单元格的行下标
        this.rowIndex = row.rowIndex;
        return "warning-row";
      }
    },
    // 当前单元格的行列数据  解决蒙版定位
    cellMouseLeave(row, column, cell, event) {
      this.row = row;
      this.column = column;
    },
    // 检测鼠标离开单元格  置空column 保证所有单元格都能取消蒙版
    mouseleave() {
      this.column = {};
    },
    // 添加测量记录
    openaddRecord() {
      this.dialogFormVisible = true;
      console.log(this.column)
    },
    // 修改测量记录
    openreviseRecord() {},
  },
};
</script>

<style>
.el-table--enable-row-hover .el-table__body tr:hover > td.warning-row {
  background: rgb(132, 133, 135) !important;
}
</style>

<style lang="scss" scoped>
.el-table {
  & >>> .warning-row {
    background: rgb(132, 133, 135);
    .operation {
      width: 100%;
      height: 100%;
      .el-button {
        color: #fff;
      }
    }
  }
}
</style>